<template>
  <el-dialog :visible.sync="value" :before-close="() => $emit('input', false)">
    <template slot="title">
      代充清算
    </template>
    <el-table border :data="[rowData]">
      <el-table-column label="代理账户名" prop="proxyUserName">
        <template slot-scope="{row}">
          <div>{{row.userName}}</div>
        </template>
      </el-table-column>
      <el-table-column label="总额度" prop="amount">
        <template slot-scope="{row}">
          {{row.amount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="已上分额度" prop="payOutAmount">
        <template slot-scope="{row}">
          {{row.payOutAmount | currency}}
        </template>
      </el-table-column>
      <!--<el-table-column label="已下分额度" prop="creditAmount">-->
        <!--<template slot-scope="{row}">-->
          <!--{{row.creditAmount | currency}}-->
        <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column label="实际使用上分额度" prop="actualPayOutAmount">-->
        <!--<template slot-scope="{row}">-->
          <!--{{row.actualPayOutAmount | currency}}-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column label="清算额度" prop="clearAmount">
        <template slot-scope="{row}">
          <el-input v-model="clearAmount" type="number" @keyup.enter.native="checkAmout"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <div>注：代充清算通过后，会根据清算额度将代理进行上分额度清算，恢复清算后的额度。</div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('input', false)" :loading="loading">取 消</el-button>
      <el-button type="primary" @click="checkAmout" :loading="loading">确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { applyCreditClearReorderSet, applyCreditClearReorder } from '@/services/api/recharge';

import { form } from '@/build';

export default {

  name: 'apply-reorder-dialog',

  props: ['value', 'id', 'rowScopeData'],

  mixins: [form],

  data() {
    return {
      rowData: {},
      clearAmount: '',
      form: {
        id: this.id,
        applyComment: undefined,
        amount: this.rowScopeData.amount,
      },
      filters: {
        proxyId: this.rowScopeData.id,
      },
      rules: {
        sucReqRemark: {
          required: true,
          message: '充值补单备注为必填项',
        },
      },
    };
  },
  methods: {
    checkAmout() {
      if (this.clearAmount === '') {
        this.$notify({
          type: 'error',
          message: '请输入清算额度金额',
        });
      } else if (!_.isInteger(Number(this.clearAmount)) || this.clearAmount < 0) {
        this.$notify({
          type: 'error',
          message: '请输入正整数',
        });
      } else {
        this.doSave({ action: 'saveForm' });
      }
    },
  },
  mounted() {
    this.bindGet(applyCreditClearReorder, 'rowData', {
      action: 'getGrid',
      sendingData: 'filters',
      // format: data=>data.items
    });
    this.getAll();
    this.bindSave(applyCreditClearReorderSet, 'saveForm', 'rowScopeData', {
      beforeSend: (data) => {
        const { id } = data;
        return { proxyId: id, amount: this.clearAmount };
      },
      afterSuccess: () => {
        this.$emit('input', false);
        this.$parent.gridSearch();
      },
    });
  },
};
</script>

<style scoped>
</style>
